<script setup lang="ts">
</script>

<template>
    <RouterView v-slot="{ Component }">
        <transition name="fade" mode="out-in">
            <component :is="Component" />
        </transition>
    </RouterView>
</template>
<style lang="scss" scoped>
.fade-enter-from {
    opacity: 0;
    transform: translateX(-100%);
}

.fade-enter-to {
    transform: translateX(0%);
    opacity: 1;
}

.fade-leave-active,
.fade-enter-active {
    transition: all 0.5s ease-out;
}

.fade-leave-from {
    transform: translateX(0%);
    opacity: 1;
}

.fade-leave-to {
    transform: translateX(100%);
    opacity: 0;
}
</style>